<template>
	<!-- 就诊人切换 -->
	<view class="patient">
		<view class="peopleInfo">
			<view class="name">
				{{userInfo.name}}
			</view>
			<view class="patient_card">
				{{userInfo.idcard.slice(0,4)+'****'+userInfo.idcard.slice(-2)}}
			</view>
		</view>
		<view class="operate" @click="open">
			<image style="width: 40rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E7%BC%B4%E8%B4%B9/u1116.svg" mode="widthFix"></image>
			<text class="qie">切换</text>
		</view>
	</view>
	<!-- 添加就诊人信息 -->
	<uni-popup ref="popup" type="bottom" background-color="#fff" class="popup">
		<view class="popup-content">
			<view class="title">
				选择就诊人
			</view>
			<image class="close" @click="close" src="https://cdn8.axureshop.com/demo/2208121/images/%E7%A1%AE%E8%AE%A4%E9%A2%84%E7%BA%A6/u1063.svg" mode="widthFix"></image>
			<view class="patientlists">
				<view class="patientlist" @click="selectPatient(patientInfo)">
					<view class="patient_name">
						{{patientInfo.name}}
					</view>
					<view class="patient_card">
						{{patientInfo.idcard.slice(0,4)+'****'+patientInfo.idcard.slice(-2)}}
					</view>
				</view>
				<view class="patientlist" v-for="(item,index) in families" :key="index" @click="selectPatient(item)">
					<view class="patient_name">
						{{item.name}}
					</view>
					<view class="patient_card">
						{{item.idcard.slice(0,4)+'****'+item.idcard.slice(-2)}}
					</view>
				</view>
			</view>
			<button type="primary" class="addpatient" @click="addpient">添加就诊人</button>
		</view>
	</uni-popup>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import api from '../../src/utils/api.js'
	const userInfo = ref({
		idcard:'',
		name:''
	})
	const patientInfo = ref({
		idcard:'',
		name:''
	})
	const families = reactive([])
	onLoad(()=>{
		api('/appselectid',{
			userid:uni.getStorageSync('userid')
		}).then(res=>{
			userInfo.value = res.data[0]
			patientInfo.value = res.data[0]
		}).catch(err=>{
			console.log(err)
		})
	})
	// 切换就诊人
	const popup = ref(null)
	const open = () => {
		families.splice(0)
		api('/appfamily',{
			userid:uni.getStorageSync('userid')
		}).then(res=>{
			families.push(...res)
		}).catch(err=>{
			console.log(err)
		})
		popup.value.open()
	}
	// 选择就诊人
	const emit = defineEmits(['sendinfo'])
	const selectPatient = (userinfo) => {
		userInfo.value = userinfo
		popup.value.close()
		emit('sendinfo',userinfo)
	}
	const close = () => {
		popup.value.close()
	}
	
	// 添加就诊人
	const addpient = () => {
		uni.navigateTo({
			url:'/pages/Add_patient/Add_patient'
		})
	}
</script>

<style lang="scss" scoped>
	// 就诊人切换
	.patient{
		width: 100%;
		height: 88rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding:  0 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.peopleInfo{
			display: flex;
			align-items: center;
			font-family: 'Microsoft YaHei UI', sans-serif;
			font-size: 28rpx;
			height: 44rpx;
			.name{
				font-size: 32rpx;
			}
			.patient_card{
				color: #aaa;
				margin-left: 44rpx;
			}
		}
		.operate{
			display: flex;
			align-items: center;
			font-family: 'Microsoft YaHei UI', sans-serif;
			font-size: 32rpx;
			color: #000;
			.qie{
				margin-left: 12rpx;
			}
		}
	}
	// 就诊人切换弹出层
	.popup{
		
		.popup-content {
			// display: flex;
			// flex-direction: column;
			// align-items: center;
			// justify-content: center;
			border-radius: 72rpx 72rpx 0 0;
			padding: 30rpx 45rpx 0;
			box-sizing: border-box;
			height: 804rpx;
			background-color: #fff;
			font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
			position: relative;
			.title{
				font-size: 32rpx;
				font-weight: 700;
				width: 100%;
				text-align: center;
			}
			.close{
				width: 32rpx;
				position: absolute;
				right: 45rpx;
				cursor: pointer;
				top: 38rpx;
			}
			
			.patientlists{
				margin-top: 60rpx;
				.patientlist{
					width: 660rpx;
					height: 92rpx;
					border-radius: 16rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					background-color: rgba(230, 244, 255, 1);
					font-size: 28rpx;
					font-family: 'Microsoft YaHei UI', sans-serif;
					margin-bottom: 40rpx;
					.patient_card{
						margin-left: 20rpx;
						color: #aaa;
					}
				}
			}
			.addpatient{
				width: 660rpx;
				height: 80rpx;
				line-height: 80rpx;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #fff;
				background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u579.svg');
				background-size: cover;
				position: absolute;
				bottom: 40rpx;
			}
		}
	}
</style>